// 由于在使用html2canvas时一直会出现初次生成图片和后续生成图片的样式不一致，所以改用htmlToImage

import * as htmlToImage from 'html-to-image';
import JsPdf from 'jspdf';

// A4纸张尺寸
const A4Size = {
  width: 595.28,
  height: 841.89
};

const downloadPDF = (ele, pdfName, cb) => {
  htmlToImage.toCanvas(ele, {
    backgroundColor: '#fff',
    pixelRatio: 2 // 可以改善图片的清晰度，但是会使图片变大很多，不能调的很大，一般1.5或者2即可
  }).then(canvas => {
    // html-to-image不能使用定位或者margin，否则内容会偏移
    // 可以使用z-index将下载的内容放在展示的内容的下面，下载时先display: block;完事后在让其看不见
    // ele.style.display = 'none';
    let contentWidth = canvas.width;
    let contentHeight = canvas.height;
    let pageHeight = (contentWidth / A4Size.width) * A4Size.height;
    let leftHeight = contentHeight;
    let position = 0;
    let imgWidth = A4Size.width;
    let imgHeight = (imgWidth / contentWidth) * contentHeight;
    // 在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略
    let pageData = canvas.toDataURL('image/jpeg');
    // 这里的pageData就是base64全路径格式的图片，也可以直接下载图片
    let pdf = new JsPdf('', 'pt', 'a4');
    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
    } else {
      while (leftHeight > 0) {
        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
        leftHeight -= pageHeight;
        position -= A4Size.height;
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    pdf.save(pdfName, {returnPromise: true}).then(() => {
      cb && cb();
    });
  }).catch(e => {
    console.log('导出pdf文件失败', e);
  });
};

export default {
  downloadPDF
};
